<template>
	<view class="category__container container">
		<!-- 导航栏 -->
		<view class="home__top">
			<!-- 分类列表 -->
			<Tab :list="categoryList" v-if="categoryList.length>0" @tabEvent="tabEvent" normalFontSize="36rpx"  boldFontSize="50rpx" style="height: 100%;">
				<template #top-right="obj">
					<view class="search__btn">
						<Icon class="search__svg" href="search"/>
					</view>
				</template>
				<template #[`tab-${index}`]="obj" v-for="(item,index) in categoryList">
					<view class="category__wrapper">
						<view class="category__sidebar"  >
							<view class="category__sidebar__item" :class="[{'selected':categoryId==item.id}]" @click="categorySeleted(item.id)" v-for="(item,i) in categoryList[index].list">{{item.categoryName}}</view>
						</view>
						<scroll-view  class="category__main"  scroll-y="true" :scroll-into-view="'category-'+categoryId" :show-scrollbar="false" :scroll-with-animation="true">
							<Classification :id="'category-'+category.id" :category="category" class="category__main__item" v-for="(category,i) in categoryList[index].list">123</Classification>
						</scroll-view>
					</view>
				</template>
			</Tab> 
		</view>
	</view>
</template>

<script setup>
	import Icon from '@/common/components/Icon/index.vue';
	import Tab from '@/common/components/Tab/index.vue';
	import Classification from '@/components/Classification/index.vue'
	import {ref,onMounted} from 'vue';
	
	const categoryList = ref([]);
	const categorySelected = ref(0);
	// 选择不同的分类
	const categoryId = ref(null);
	
	// 切换选项卡
	function tabEvent(e){
		categorySelected.value = e.index;
		categoryId.value = categoryList.value[categorySelected.value].list[0].id
	}
	// 选择不同分类
	function categorySeleted(id){
		categoryId.value = id;
	}
	
	
	let arr = [{name:"玄幻",},
					{name:"玄幻1",},
					{name:"诸天万界",},
					{name:"玄幻3",},
					{name:"玄幻4",},
					{name:"玄幻15",},
					{name:"玄幻6",},
					{name:"玄幻7",},
					{name:"玄幻7",},
					{name:"玄幻8",},
					{name:"玄幻1",},
					{name:"玄幻2",},
					{name:"玄幻3",},
					{name:"玄幻54",},
					{name:"玄幻6",},
					{name:"玄幻1",},
					{name:"玄幻2",},
					{name:"玄幻4",},
					{name:"玄幻2",},
					{name:"玄幻q",},
					{name:"玄幻s",},
					{name:"玄幻1",},
					{name:"玄幻s",},
					{name:"玄幻a",},
					{name:"玄幻w",},
					{name:"玄幻s",},
					{name:"玄幻d",},
					{name:"玄幻s",},
					{name:"玄幻a",},	{name:"玄幻1",},
					{name:"玄幻s",},
					{name:"玄幻a",},
					{name:"玄幻w",},
					{name:"玄幻s",},
					{name:"玄幻d",},
					{name:"玄幻s",},
					{name:"玄幻a",},	{name:"玄幻1",},
					{name:"玄幻s",},
					{name:"玄幻a",},
					{name:"玄幻w",},
					{name:"玄幻s",},
					{name:"玄幻d",},
					{name:"玄幻s",},
					{name:"玄幻a",},	{name:"玄幻1",},
					{name:"玄幻s",},
					{name:"玄幻a",},
					{name:"玄幻w",},
					{name:"玄幻s",},
					{name:"玄幻d",},
					{name:"玄幻s",},
					{name:"玄幻a",},
					{name:"玄幻1",},
					{name:"玄幻s",},
					{name:"玄幻a",},
					{name:"玄幻w",},
					{name:"玄幻s",},
					{name:"玄幻d",},
					{name:"玄幻s",},
					{name:"玄幻a",},]
	onMounted(()=>{
		categoryList.value.push({
			id:"1",
			tabName:"男生",
			list:[{
				id:"1231",
				categoryName:"热门标签",
				data:[...arr]
			},{
				id:"131",
				categoryName:"玄幻",
				data:[...arr]
			},{
				id:"123121",
				categoryName:"都市",
				data:[...arr]
			},{
				id:"121231",
				categoryName:"历史",
				data:[...arr]
			},{
				id:"12ca31",
				categoryName:"星际",
				data:[...arr]
			},{
				id:"12321",
				categoryName:"悬疑",
				data:[...arr]
			}]
		},{
			id:"2",
			tabName:"女生",
			list:[{
				id:"12ca131",
				categoryName:"热门标签",
				data:[...arr]
			},{
				id:"1122331",
				categoryName:"现代言情",
				data:[...arr]
			},{
				id:"12ca13541",
				categoryName:"古代言情",
				data:[]
			},{
				id:"12ca131123",
				categoryName:"年代",
				data:[...arr]
			},{
				id:"12ca11231231",
				categoryName:"纯爱",
				data:[...arr]
			},{
				id:"12ca112312312331",
				categoryName:"悬疑",
				data:[...arr]
			}]
			
		},)
		let system = uni.getSystemInfoSync();
		categoryId.value = categoryList.value[categorySelected.value].list[0].id
	})
	
</script>

<style lang="scss">
.category__container{
	display: flex;
	flex-direction: column;
	gap: 30rpx;
	background-color: #f6f6f6;
	
	.search__btn{
		.search__svg{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.home__top{
		height: 100%;
		padding-top: 20rpx;
	}
	.category__wrapper{
		display: flex;
		height: 100%;
		.category__sidebar{
			
			font-weight: bold;
			font-size: 30rpx;
			&__item{
				padding: 30rpx 20rpx 30rpx 0;
				text-align: center;
				white-space: nowrap;
				&.selected{
					color: #f96927;
				}
			}
		}
		.category__main{
			flex: 1;
			height: 100%;
			border-radius: 4rpx;
			// overflow-y: scroll;
			background-color: white;
			&::-webkit-scrollbar{
				display: none;
			}
			.category__main__item{
				// height: 100rpx;
				
			}
		}
	}
}

</style>
